<template>
	<el-table-column
			:prop="prop"
			min-width="150"
			:label="label">
		<template #default="scope">
			<div>
				<el-tooltip placement="top" popper-class="tool-tip">
					<template #content>
						<el-button
								link
								type="text"
								style="color:dodgerblue"
								@click="copyData(scope.row[prop])">
							复制
						</el-button>
						{{
							scope.row[prop].length > tooltipMaxLength ?
									'【仅展示前' + tooltipMaxLength + '字符】' + scope.row[prop].substring(0, Math.min(tooltipMaxLength, scope.row[prop].length)) + '...' :
									scope.row[prop]
						}}
						<el-button
								v-if="scope.row[prop].length > tooltipMaxLength"
								link
								type="text"
								style="color:dodgerblue"
								@click="copyData(scope.row[prop])">
							复制
						</el-button>
					</template>
					{{
						scope.row.hasOwnProperty(prop) ?
								scope.row[prop].substring(0, Math.min(15, scope.row[prop].length)) + '...' :
								scope.row[prop]
					}}
				</el-tooltip>
			</div>
		</template>
	</el-table-column>
</template>

<script setup lang="ts">

defineProps({
	label: {
		type: String
	},
	prop: {
		type: String
	},
	tooltipMaxLength: {
		type: Number,
		default: 1000,
	}
})

const copyData = (columnValue: any) => {
	let hiddenInput = document.createElement('input'); //创建一个隐藏input（重要！）
	hiddenInput.value = columnValue; //赋值
	document.body.appendChild(hiddenInput);
	hiddenInput.select(); // 选择对象
	navigator.clipboard.writeText(columnValue);
	hiddenInput.className = 'hiddenInput';
	hiddenInput.style.display = 'none';
	ElMessage.success('已复制');
};
</script>
